<template>
  <div class="container">
    <h2 class="title">萌宠百科</h2>
    <div class="ency-list">
      <p 
        v-for="i in encyclopedias" 
        :key="i.id" 
        class="ency-item" 
        @click="toEncyDetail(i.id)"
      >
        {{ i.title }}
      </p>

      <el-pagination
        background
        layout="prev, pager, next"
        :page-size=page_size
        :total=counts
        @current-change="fnToPage">
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { get } from '@/utils/request';
import router from '@/router';

const encyclopedias = ref([]);
const page_size = ref();
const counts = ref();

onMounted(() => {
  fnToPage(1);
});

const fnToPage = (page) => {
  get('http://127.0.0.1:8000/index/petencyclopedia/?page=' + page)
      .then((result) => {
        if (result.data.code === 200) {
          encyclopedias.value = result.data.data;
          page_size.value = result.data.page_size;
          counts.value = result.data.counts;
        }
      })
      .catch((err) => {
        console.error("获取数据失败:", err);
      });
}

const toEncyDetail = (id) => {
    router.push({ path: '/encydetail', query: { id } });
};
</script>

<style>
body {
  background: linear-gradient(to right, #f0f8ff, #e6e6fa); /* 渐变背景 */
  font-family: 'Arial', sans-serif; /* 使用简单的字体 */
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff; /* 白色背景 */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.title {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.ency-list {
  display: flex;
  flex-direction: column;
}

.ency-item {
  padding: 15px;
  margin: 8px 0;
  background-color: #f9f9f9; /* 条目背景色 */
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.ency-item:hover {
  background-color: #e8f0fe; /* 悬停时背景色 */
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
</style>
